<template>
	<view>
		
	<view v-if="ownCoupon==true">
		<view class="couponMainContain" v-for="(coupon,i) in couponList" :key="i">
				
				<view class="tickets" >
					<view class="l-tickets">
						<view class="lTicketsLeft">
							<view class="ticketsAmount">
								<text style="font-size: 45rpx; font-weight:300; margin-left:22rpx;">￥</text>{{ coupon.amount }}
							</view>
							<view class="ticketsAmountDetail">
								<view v-if="coupon.type==0">{{coupon.tag}}地区可用 </view>
								<view v-else-if="coupon.type==1">新人卷 </view>
							</view>
						</view>
						<view class="endDate">到期时间：{{coupon.expireTime}} </view>
					</view>
					<view class="r-tickets">
						<view class="ticketsBtn">
							<u-button  throttleTime="500" color="#FFB300" @click="toUse(item)" >去使用</u-button>
						</view>
					</view>
				</view>
				</text>
		</view>



	</view>


	<!-- 如果没有优惠券则显示优惠券为空 -->
	<u-empty v-else mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png">
	</u-empty>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				ownCoupon: false,
				couponList:[]
			}
		},
		methods: {
			toUse(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			}
		},
		async beforeMount() {
			let query = {
				userId: this.userInfo.data.data.id,
				orderBy: 0 //暂时用不到，设初值为0
			};
			const userCoupon = await uni.$u.http.post("/user/coupon/list", query, {
				custom: {
					auth: true
				}
			})
			if (userCoupon.data.data !== null) {
				this.ownCoupon = true
			}
			this.couponList=userCoupon.data.data
			console.log(userCoupon.data.data);
		},
		computed: {
			...mapState('m_user', ['userInfo']),
		}
	}
</script>

<style lang="scss">
 	.tickets {
 		display: flex;
 		padding: 20rpx;
 		width: 100%;
 		height: 230rpx;
 		box-sizing: border-box;
 		.lTicketsLeft {
 			display: flex;
			flex-direction: column;
			width: 30%;	
			align-items: center;
			margin-top: 20rpx;
			.ticketsAmount{
				font-size: 80rpx;
				color: #ffff7f;
				font-weight: bold;
			}
			.ticketsAmountDetail{
				font-size: 18rpx;
				color: #636363;
			}
 		}
		.endDate{
			margin-left: 28rpx;
			font-size: 18rpx;
			color: #636363;
		}
 	}

 	.l-tickets {
 		width: 75%;
 		background: skyblue;
 	}

 	.r-tickets {
 		flex: 1;
 		background: orchid;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 	}

 	.l-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		left: -8rpx;
 		/* 
   	语法：
   	background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; 
   	radial-gradient(shape size at position, start-color, ..., last-color);
   */
 		background: radial-gradient(circle at left center, transparent 8rpx, skyblue 0) left center / 8rpx 20rpx;
 	}

 	.r-tickets {
 		flex: 1;
 		position: relative;
 	}

 	.r-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		right: -8rpx;
 		background: radial-gradient(circle at right center, transparent 8rpx, orchid 0) right center / 8rpx 20rpx;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, skyblue 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
 	}

 	.r-tickets {
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, orchid 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, orchid 0) right bottom / 100% 50% no-repeat;
 	}

 	.r-tickets::before {
 		content: '';
 		width: 1rpx;
 		background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
 		position: absolute;
 		left: 0;
 		top: 16rpx;
 		bottom: 16rpx;
 	}

 	.l-tickets {
 		width: 75%;
 		height: 100%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, skyblue 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.r-tickets {
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, orchid 0) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, orchid 0) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.l-tickets {
 		width: 75%;
 		position: relative;
 		background: radial-gradient(circle at right top, transparent 16rpx, #ffc854 0, #FFB300 100%) right top / 100% 50% no-repeat,
 			radial-gradient(circle at right bottom, transparent 16rpx, #ffc854 0, #FFB300 100%) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(-3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.l-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		left: -8rpx;
 		background: radial-gradient(circle at left center, transparent 8rpx, #FFB300 0) left center / 8rpx 20rpx;
 	}
	.ticketsBtn{
		margin-top: 50rpx;
	}
 	.r-tickets {
 		flex: 1;
 		position: relative;
 		background: radial-gradient(circle at left top, transparent 16rpx, #ffc854 0, #ffcc61 100%) right top / 100% 50% no-repeat,
 			radial-gradient(circle at left bottom, transparent 16rpx, #ffc854 0, #ffcc61 100%) right bottom / 100% 50% no-repeat;
 		filter: drop-shadow(3px 0 3px rgba(0, 0, 0, .3));
 	}

 	.r-tickets::before {
 		content: '';
 		width: 1rpx;
 		background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
 		position: absolute;
 		left: 0;
 		top: 16rpx;
 		bottom: 16rpx;
 	}

 	.r-tickets::after {
 		content: '';
 		position: absolute;
 		height: 100%;
 		width: 8rpx;
 		top: 0;
 		right: -8rpx;
 		background: radial-gradient(circle at right center, transparent 8rpx, #ffcc61 0) right center / 8rpx 20rpx;
 	}
</style>